<template>
	<div>
		<!-- 头部 -->
		<div class="headers">
			<el-row style="padding: 5px 5px 0 20px;">
				<el-col :span="24">
					<el-form :inline="true" class="demo-form-inline">
						
						<el-form-item label="抖音号:">
							<!-- <el-select v-model="tiktokS" clearable style="width: 100px;">
								<el-option label="等于" value="2">
								</el-option>
								<el-option label="包含" value="1">
								</el-option>
								<el-option label="不包含" value="4">
								</el-option>
								<el-option label="不等于" value="0">
								</el-option>
							</el-select> -->
							<el-input v-model="order.tiktok" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="合作码:">
							<el-input v-model="order.cooperativeCode" style="width: 200px;"></el-input>
						</el-form-item>

						<el-form-item label="抖音昵称:">
							<el-input v-model="order.tiktokName" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="主页链接:">
							<el-input v-model="order.homeLink" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="订单状态:">
							<el-select v-model="order.orderStatus" clearable placeholder="全部" style="width: 200px;">
								<el-option label="已付款" value="1">
								</el-option>
								<el-option label="待处理" value="2">
								</el-option>
								<el-option label="处理中" value="3">
								</el-option>
								<el-option label="补单中" value="4">
								</el-option>
								<el-option label="退单中" value="5">
								</el-option>
								<el-option label="已完成" value="6">
								</el-option>
								<el-option label="已退单" value="7">
								</el-option>
								<el-option label="已退款" value="8">
								</el-option>
								<el-option label="有异常" value="9">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="投手:">
							<el-select clearable placeholder="全部" v-model="order.pitcherId" style="width: 200px;">
								<!-- eslint-disable-next-line -->
								<el-option v-for="item in umsPitcher" :key="item.id" :value="item.id"
									:label="item.number" style="width: 200px;">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="商品:">
							<el-select clearable placeholder="全部" v-model="order.commodityId" style="width: 200px;">
								<el-option v-for="item in cmsCommodity" :key="item.id" :value="item.id"
									:label="item.name" style="width: 200px;">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="标签:">
							<el-select clearable placeholder="全部" v-model="order.tagId" style="width: 200px;">
								<el-option v-for="item in tags" :key="item.id" :value="item.id" :label="item.name"
									style="width: 200px;">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="下单UID:">
							<el-input v-model="order.orderUid" style="width: 200px;"></el-input>
						</el-form-item>
						<el-form-item label="授权状态:">
							<el-select v-model="order.authorizationStatus" clearable placeholder="全部"
								style="width: 200px;">
								<el-option label="待确认" value="1">
								</el-option>
								<el-option label="授权中" value="2">
								</el-option>
								<el-option label="授权失败" value="4">
								</el-option>
								<el-option label="有异常" value="0">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="下单时间:">
							<el-date-picker v-model="orderTime" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px;">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="授权时间:">
							<el-date-picker v-model="privilegedTime" type="daterange" range-separator="至"
								start-placeholder="开始日期" end-placeholder="结束日期" style="width: 400px;">
							</el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="selectLike()">查询</el-button>
							<el-button size="mini" @click="dialogVisiblese=true"
								style="width: 90px;height: 40px;background-color: #00A0FF;color: #fff;">
								新建订单</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>
		</div>
		<el-table stripe @wheel.prevent="handleWheel" :header-cell-style="{'text-align':'center'}" height="1000"
			:cell-style="{ textAlign: 'center' }" :data="advertisersList.records" style="width: 100%; margin: auto"
			v-loading="loading" @expand-change="handleExpandChange" row-key="id">
			<el-table-column property="orderNumber" label="" :fixed="true" type="expand"
				:expand-row-keys="expandedRowKeys">
				<template slot-scope="scope">
					<el-table :data="scope.row.pmsProjects" stripe>
						<el-table-column property="projectId" label="项目id" width="175">
						</el-table-column>
						<el-table-column property="addTime" label="创建时间" width="155">
						</el-table-column>
						<el-table-column property="name" label="项目名称" width="400">
						</el-table-column>
						<el-table-column label="项目状态" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.projectStatus" :active-value="0" :inactive-value="1"
									@change="handleSwitchChange(scope.row)"></el-switch>
							</template>
						</el-table-column>
						<el-table-column label="总转化量" :show-overflow-tooltip='true' width="155">
							<template v-for="item in sum">
								<span :key="item.id" v-if="scope.row.id === item.id">{{item.conversionsum}}</span>
							</template>
						</el-table-column>
						<el-table-column property="conversion" label="转化量" width="100">
						</el-table-column>
						<el-table-column property="consume" label="消耗" width="100">
						</el-table-column>
						<el-table-column property="average" label="千展费用" width="100">
						</el-table-column>
						<el-table-column label="转化成本" width="155">
							<template slot-scope="scope">
								<span>{{(scope.row.consume/scope.row.conversion).toFixed(2)}}</span>
							</template>
						</el-table-column>
						<el-table-column label="账号名" width="200">
							<template slot-scope="scope">
								{{ scope.row.dname }}
								<el-tag type="success" v-if="scope.row.status==4">审核通过</el-tag>
								<el-tag type="danger" v-if="scope.row.status==8">暂停投放</el-tag>
							</template>
						</el-table-column>
						<el-table-column property="balance" label="账号余额" width="100">
						</el-table-column>
						<el-table-column property="concernTime" label="关停时间" width="155">
						</el-table-column>
						<el-table-column property="concernType" label="关停类型">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="200">
							<template slot-scope="scope">
								<el-row>
									<el-col span="12"><el-button type="text" 
											@click="add(scope.row.projectId)">添加广告</el-button></el-col>
									<el-col span="6"><el-button type="text"
											@click="openNewPage(scope.row.aid,scope.row.projectId)">查看项目</el-button></el-col>
								</el-row>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-table-column>
			<el-table-column property="orderNumber" label="订单号" width="200" :fixed="true">
			</el-table-column>
			<el-table-column property="orderTime" label="下单/授权(时间)" :fixed="true" width="250">
				<template slot-scope="scope">
					<span style="color: #363636;" type="text"> 下单时间:{{scope.row.orderTime}}</span><br />
					<span>授权时间:{{scope.row.allocateTime}}</span>
				</template>
			</el-table-column>
			<el-table-column width="200" label="抖音号/合作码" :show-overflow-tooltip='true' fixed="left">
				<template slot-scope="scope">
					抖音号:<el-button style="color: #363636;" type="text"
						@click="copyText(scope.row.tiktok)">{{scope.row.tiktok}}</el-button><br />
					合作码:
					<el-button style="color: #363636;" type="text"
						@click="copyText(scope.row.cooperativeCode)">{{scope.row.cooperativeCode}}</el-button>
				</template>
			</el-table-column>

			<el-table-column label="订单备注" :show-overflow-tooltip='true' width="auto">

				<template v-if="scope.row.orderRemark !==''" slot-scope="scope">
					<span style="color: #00aa00;">
						{{ scope.row.orderRemark }}
					</span><br />
					<span
						v-if="typeof scope.row.authorizationRemark === 'string'">{{ scope.row.authorizationRemark }}</span>
					<span v-else-if="typeof scope.row.authorizationRemark === 'number'" v-text="' '"></span>
					<span v-else>暂无数据</span>
				</template>
			</el-table-column>
			<el-table-column label="用户主页" width="300" :show-overflow-tooltip='true'>
				<div slot-scope="scope">
					<el-button type="text" @click="openNewPages(scope.row.homeLink)">{{scope.row.tiktokName}}</el-button>
					<i class="el-icon-copy-document" @click="copyText(scope.row.homeLink)"></i>
				</div>
			</el-table-column>

			<el-table-column label="是否授权" width="120" :show-overflow-tooltip='true'>
				<div slot-scope="scope">
					<el-button type="success"
						v-if="scope.row.authorizationStatus==2||scope.row.authorizationStatus==5">授权成功</el-button>
					<el-button type="danger" v-if="scope.row.authorizationStatus==0">授权失败</el-button>
					<el-button type="warning" v-if="scope.row.authorizationStatus==1">待确认</el-button>
				</div>
			</el-table-column>
			<el-table-column label="订单单价">
				<template slot-scope="scope">
					<span>{{scope.row.unitPrice.toFixed(3)}}</span>
				</template>
			</el-table-column>
			<el-table-column property="orderQuantity" label="订单数量" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column label="订单金额">
				<template slot-scope="scope">
					<span>{{scope.row.orderAmount.toFixed(2)}}</span>
				</template>
			</el-table-column>
			<el-table-column property="pitcherId" label="投手" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<template v-for="item in umsPitcher">
						<span :key="item.id" v-if="scope.row.pitcherId === item.id">{{ item.number}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column property="beginQuantity" label="开始量" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column property="currentQuantity" label="当前量" :show-overflow-tooltip='true'>
			</el-table-column>
			<el-table-column property="beginQuantity" label="完成量" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<span>{{scope.row.currentQuantity-scope.row.beginQuantity}}</span>
				</template>
			</el-table-column>
			<el-table-column label="总消耗">
				<template slot-scope="scope">
					<template v-for="item in sum">
						<span :key="item.id" v-if="scope.row.id === item.id"> {{ formatNumber(item.consumesum)}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="转化量" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<template v-for="item in sum">
						<span :key="item.id" v-if="scope.row.id === item.id">{{item.conversionsum}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="转化成本">
				<template slot-scope="scope">
					<template v-for="item in sum">
						<span :key="item.id"
							v-if="scope.row.id === item.id">{{(item.consumesum/item.conversionsum).toFixed(2)}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="千展成本" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<template v-for="item in sum">
						<span :key="item.id" v-if="scope.row.id === item.id">{{(item.averageavg).toFixed(1)}}</span>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="催单次数" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<el-button type="info" @click="cuidan(scope.row.id)">{{scope.row.accomplishQuantity}}</el-button>
				</template>
			</el-table-column>
			<el-table-column label="耗时" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<span>{{(scope.row.consumingTime).toFixed(1)}}h</span>
				</template>
			</el-table-column>
			<el-table-column label="转化进度" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<template v-for="item in sum">
						<el-progress :key="item.id" type="circle" v-if="scope.row.id === item.id"
							:percentage="((item.conversionsum / scope.row.orderQuantity) * 100).toFixed(2)"
							width="60"></el-progress>
					</template>
				</template>
			</el-table-column>
			<el-table-column label="完成进度" :show-overflow-tooltip='true'>
				<template slot-scope="scope">
					<el-progress type="circle" :percentage="getPercentage(scope.row)" width="60"></el-progress>
				</template>
			</el-table-column>


			<el-table-column property=" putStatus" label="订单状态">
				<template slot-scope="scope">
					<el-button type="text" v-if="scope.row.orderStatus==1">已付款</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==2">待处理</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==3">处理中</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==4">补单中</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==5">退单中</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==6">已完成</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==7">已退单</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==8">已退款</el-button>
					<el-button type="text" v-if="scope.row.orderStatus==9">有异常</el-button>
				</template>
			</el-table-column>
			<el-table-column label="操作" fixed="right" width="200">
				<el-row slot-scope="scope">
					<el-col span="12"><el-button type="text" size="mini"
							@click="viewAccount(scope.row.id)">修改订单信息</el-button></el-col>
					<el-col span="6"><el-button type="text" size="mini" :disabled="scope.row.orderStatus!=3"
							@click="insertProject(scope.row.id)">添加项目</el-button></el-col>
				</el-row>
			</el-table-column>
		</el-table>
		<el-dialog title="添加订单" :visible.sync="dialogVisiblese" width="20%" :before-close="handleClose">
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 25px;">商品:</span>
				<el-select v-model="pid" clearable placeholder="全部" style="width: 200px;">
					<!-- eslint-disable-next-line -->
					<el-option v-for="item in cmsCommodity" :key="item.id" :value="item.id" :label="item.name"
						style="width: 200px;">
					</el-option>
				</el-select>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 10px;">订单数量:</span>
				<el-input v-model="num" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 16px;">抖音号:</span>
				<el-input v-model="trill" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 16px;">合作码:</span>
				<el-input v-model="code" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 10px;">主页链接:</span>
				<el-input v-model="homeLike" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 10px;">人群标签:</span>
				<el-select v-model="tagId" style="width: 200px;">
					<el-option v-for="(item,index) in tags" v-bind:key="index" :label="item.name" :value="item.id">
					</el-option>
				</el-select>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 10px;">用户名称:</span>
				<el-input v-model="userName" placeholder="请输入内容" style="width: 200px;"></el-input>
			</div>
			<div style="margin: 10px 0 0 0;">
				<span style="margin: 0 25px;">单价:</span>
				<el-input v-model="price" placeholder="不填按照原价" style="width: 200px;"></el-input>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="redis()">重置</el-button>
				<el-button type="primary" @click="insert()">确 定</el-button>
			</span>
		</el-dialog>
		<div>
			<el-row style="position: absolute; top: 1170px; right: 100px;">
				<el-col :span="20">
					<div class="block">
						<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="1" :page-sizes="[10, 20, 50,100]" :page-size="10"
							layout="total, sizes, prev, pager, next, jumper" :total="advertisersList.total">
						</el-pagination>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	// import ClipboardJS from 'clipboard';
	import {
		Loading
	} from 'element-ui';
	import '@/assets/css/index.css'
	import qs from 'qs'
	// const clipboard = new ClipboardJS('.btn');
	export default {
		name: "organiZation",
		data() {
			return {
				tiktokS: '2',
				isCtrlPressed: false,
				isShiftPressed: false,
				tagId: '',
				privilegedTime: '',
				orderTime: '',
				totalConsumeKey: 'totalConsume',
				consumesum: 0,
				loading: false,
				dialogVisibles: false,
				pid: '',
				num: '',
				trill: '',
				code: '',
				homeLike: '',
				userName: '',
				price: '',
				dialogVisiblese: false,
				dialogVisible: false,
				advertisersList: [],
				resourceCategory: [],
				filterConditions: ['1'],
				aName: '',
				aId: '',
				role: '',
				categoryIds: '',
				description: '',
				title: '',
				resource: [],
				cmsCommodity: [],
				omsOrder: [],
				roleDescriptions: {

				},
				pmsProject: [],
				umsAdvertisingUser: [],
				umsPitcher: [],
				omsOrderProject: [],
				size: 10,
				current: 1,
				sum: [],
				tags: [],
				order: {
					homeLink:null,
					tagId: null,
					id: null,
					orderNumber: null,
					UserName: null,
					orderTime: null,
					allocateTime: null,
					unitPrice: null,
					orderAmount: null,
					orderUid: null,
					orderLevel: null,
					tiktok: null,
					orderTimeBegin: null,
					orderTimeEnd: null,
					privilegedTimeBegin: null,
					privilegedTimeEnd: null,
					tiktokName: null,
					cooperativeCode: null,
					commodityId: null,
					authorizationStatus: null,
					consumingTime: null,
					authorizationRemark: null,
					pitcherId: null,
					broadcastStatus: null,
					currentQuantity: null,
					beginQuantity: null,
					accomplishQuantity: null,
					disposeTime: null,
					operationRemark: null,
					abnormalStatus: null,
					currentConsume: null,
					goalProgress: null,
					targetConsumption: null,
					putStatus: null,
					putRemark: null,
					orderQuantity: null,
					userHome: null,
					orderStatus: null,
					accomplishTime: null,
					orderRemark: null,
					uid: null,
					inviteId: null,
					stage: null,
					consumesum: null,
					conversionsum: null,
					averageavg: null,
				}
			}
		},

		// mounted() {
		// 	// 初始化Clipboard.js
		// 	new ClipboardJS('.copy-btn');
		// },
		created() {
			this.pollData();
		},
		beforeDestroy() {
			this.stopPolling();
			document.removeEventListener('keydown', this.handleKeyDown);
			document.removeEventListener('keyup', this.handleKeyUp);
		},
		mounted() {
			document.addEventListener('keydown', this.handleKeyDown);
			document.addEventListener('keyup', this.handleKeyUp);
		},
		methods: {
			openNewPage(aid, pid) {
				window.open('https://ad.oceanengine.com/promotion/promote-manage/project/ads?aadvid=' + aid +
					'&local_project_id=' + pid + '&drillfilter_search_type=%25229%2522');
			},
			openNewPages(url){
				window.open(url);
			},
			formatNumber(number) {
				// 使用 toFixed 方法保留两位小数
				return number.toFixed(2);
			},
			cuidan(id) {
				this.$confirm('确定催单?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$axios.post('omsOrder/cuidan/' + id).then((res) => {
						console.log(res)
					});
					this.$message({
						type: 'success',
						message: '修改成功!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});


			},
			handleSwitchChange(pmsProject) {
				let than = this
				this.$axios.post('pmsProject/updateProjectStage', {
					...pmsProject
				}, {
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					if (res) {
						than.$message({
							message: '修改成功',
							type: 'success'
						});
					}

				});
			},
			handleWheel(event) {
				if (this.isCtrlPressed && this.isShiftPressed) {
					event.preventDefault(); // 阻止默认的滚动行为
					// 根据滚轮方向调整水平滚动位置，这里简单示例，具体实现可能依赖于你的表格组件
					const delta = Math.sign(event.deltaY);
					this.scrollTableHorizontally(delta);
				}
			},
			scrollTableHorizontally(direction) {
				// 这里需要根据你的实际表格组件来实现水平滚动
				// 假设table是具有滚动条的div
				const tableElement = this.$refs.yourTableRef; // 确保yourTableRef指向你的表格元素
				tableElement.scrollLeft += direction * 50; // 50是一个示例值，根据需要调整滚动距离
			},
			handleKeyDown(event) {
				if (event.key === 'Control') {
					this.isCtrlPressed = true;
				}
				if (event.key === 'Shift') {
					this.isShiftPressed = true;
				}
			},
			handleKeyUp(event) {
				if (event.key === 'Control') {
					this.isCtrlPressed = false;
				}
				if (event.key === 'Shift') {
					this.isShiftPressed = false;
				}
			},
			copyText(text) {
				if (navigator.clipboard && navigator.clipboard.writeText) {
					navigator.clipboard.writeText(text).then(() => {
						this.$message({
							message: text + '已复制到剪贴板',
							type: 'success'
						});
					}).catch(err => {
						console.error('无法复制文本: ', err);
						this.fallbackCopyTextToClipboard(text);
					});
				} else {
					this.fallbackCopyTextToClipboard(text);
				}
			},
			fallbackCopyTextToClipboard(text) {
				const tempInput = document.createElement('input');
				tempInput.value = text;
				document.body.appendChild(tempInput);
				tempInput.select();
				document.execCommand('copy');
				document.body.removeChild(tempInput);
				this.$message({
					message: text + '已复制到剪贴板',
					type: 'success'
				});
			},
			totalConsume() {
				let sum = 0;
				this.advertisersList.forEach(item => {
					if (item.pmsProjects) {
						item.pmsProjects.forEach(project => {
							sum += project.consume || 0; // 处理 consume 可能为 null 或 undefined 的情况
						});
					}
				});
				return sum;
			},
			nums(consume) {
				this.consumesum = this.consumesum + consume
				return this.consumesum
			},
			handleExpandChange(row, expanded) {
				// row 是当前展开或关闭的行数据
				// expanded 是一个布尔值，表示当前行是否展开
				console.log('当前行展开状态变化：', row, '展开:', expanded);
				// 根据expanded的值，你可以执行相应的逻辑
				if (expanded) {
					console.log(row.rowKey)
					this.expandedRowKeys.push(row.rowKey);
				} else {
					this.expandedRowKeys.splice(this.expandedRowKeys.indexOf(row.rowKey), 1);
				}
			},
			// startPolling() {
			// 	this.pollData();
			// 	this.timer = setInterval(() => this.pollData(), 5000); // 每5秒更新一次
			// },
			stopPolling() {
				clearInterval(this.timer);
			},
			insertProject(id) {
				let than = this;
				this.$axios.post('pmsProject/insert', qs.stringify({
					id: id
				}, {
					headers: {
						'Content-Type': 'application/x-www-form-urlencoded'
					}
				})).then((res) => {
					// alert(res);
					console.log(res)
					this.$message({
						message: '添加成功',
						type: 'success'
					});
					than.pollData();
				});
			},
			pollData() {
				console.log(this.order)
				// alert(this.advertisersList)
				this.$axios.post('tags/list').then((res) => {
					than.tags = res.data;
					console.log("tage:" + than.tags)
				})
				if (this.advertisersList != null && this.advertisersList != '') {
					this.size = this.advertisersList.size
					this.current = this.advertisersList.current
				}
				let than = this;
				this.$axios.post('omsOrder/sum').then((res) => {
					than.sum = res.data;
					console.log(than.sum);
				});
				this.$axios.post('omsOrder/getOrders', {
					...than.order
				}, {
					params: {
						size: than.size,
						current: than.current,
					},
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					than.advertisersList = res.data;
					console.log(than.advertisersList);
				});

				this.$axios.post('cmsCommodity/select').then((res) => {
					than.cmsCommodity = res.data;
					console.log(than.cmsCommodity);
				});

				this.$axios.get('pmsProject/getList').then((res) => {
					than.pmsProject = res.data;
				});

				this.$axios.post('umsAdvertisingUser/getList').then((res) => {
					than.umsAdvertisingUser = res.data;
					console.log(than.umsAdvertisingUser);
				});

				this.$axios.post('umsPitcher/list').then((res) => {
					than.umsPitcher = res.data;
				});

				this.$axios.post('omsOrderProject/list').then((res) => {
					than.omsOrderProject = res.data;
				});
			},
			getPercentage(row) {
				const value = ((row.currentQuantity - row.beginQuantity) / row.orderQuantity) * 100;
				return Math.max(0, value).toFixed(2); // 过滤负数并保留2位小数
			},
			addFilter() {
				this.filterConditions.push({
					value: '1',
					inputValue: ''
				}); // 添加新的筛选条件  
			},
			removeFilter(index) {
				this.filterConditions.splice(index, 1); // 删除指定的筛选条件  
			},
			handleSizeChange(val) {
				let that = this
				this.$axios.post('omsOrder/getOrders', {
					...that.order
				}, {
					params: {
						size: val,
						current: that.advertisersList.current,
					},
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					that.advertisersList = res.data;
					console.log(that.advertisersList)
				})
			},
			handleCurrentChange(val) {
				let that = this;
				this.$axios.post('omsOrder/getOrders', {
					...that.order
				}, {
					params: {
						size: that.advertisersList.size,
						current: val,
					},
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					that.advertisersList = res.data;
				})
			},
			goToExternalUrl() {
				// 使用 window.location.href 跳转到外部 URL  
				window.location.href =
					'https://open.oceanengine.com/audit/oauth.html?app_id=1797546706202640&state=your_custom_params&scope=%5B300000000%2C2%2C4%2C5%2C9%2C130%2C110%2C112%2C14%2C120%2C122%2C123%2C124%2C100000005%5D&material_auth=1&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2F&rid=98ym2wdjps7'; // 外部 URL  
			},
			viewAccount(id) {
				const url = `http://192.168.2.99:8080/updateOrder?orderId=${id}`;

				// 使用window.open打开新的浏览器窗口或标签页  
				window.open(url, '_blank');
			},
			redis() {
				this.pid = ''
				this.num = ''
				this.trill = ''
				this.code = ''
				this.homeLike = ''
				this.userName = ''
				this.price = ''
				this.tagId = ''
			},
			add(id) {
				let that = this
				let loadingInstance = Loading.service(true);
				for (let i = 0; i < 10; i++) {
					this.$axios.post('pmsProject/addAmsAdvertSing', qs.stringify({
						projectId: id,
						i: i
					})).then((
						res) => {
						if (res.data === true) {
							this.$message({
								message: '添加成功',
								type: 'success'
							});
						} else {
							that.$message.error({
								message: res.data
							});
						}
					});
				}
				loadingInstance.close();

			},
			insert() {
				let that = this;
				// 确保price是数字
				const price = Number(that.price);
				const num = Number(that.num);
				const pid = Number(that.pid);
				console.log(that.pid)
				this.$axios
					.post('omsOrder/insert', null, {
						params: {
							pid: pid,
							num: num,
							trill: that.trill,
							code: that.code,
							homeLike: that.homeLike,
							userName: that.userName,
							price: price,
							tagId: that.tagId
						},
						headers: {
							'Content-Type': 'application/json'
						}
					}) // JSON格式
					.then((res) => {
						if (res.data === true) {
							that.dialogVisiblese = false;
							this.$message({
								message: '添加成功',
								type: 'success'
							});
						} else {
							that.$message.error({
								message: res.data
							});
						}
					})
					.catch((error) => {
						console.error('Error:', error.response.data);
						// 添加其他错误处理逻辑
					});
			},
			selectLike() {
				let orderTimeBigin = this.formatDate(this.orderTime[0])
				let orderTimeend = this.formatDate(this.orderTime[1])
				let privilegedTimeBigin = this.formatDate(this.privilegedTime[0])
				let privilegedTimeEnd = this.formatDate(this.privilegedTime[1])
				this.order.orderTimeBegin = orderTimeBigin
				this.order.orderTimeEnd = orderTimeend
				this.order.privilegedTimeBigin = privilegedTimeBigin
				this.order.privilegedTimeEnd = privilegedTimeEnd
				console.log(this.order)
				let than = this
				this.$axios.post('omsOrder/getOrders', {
					...than.order
				}, {
					params: {
						size: than.advertisersList.size,
						current: 1,
					},
					headers: {
						'Content-Type': 'application/json'
					}
				}).then((res) => {
					than.advertisersList = res.data;
					console.log(than.advertisersList);
				});

			},
			formatDate(dateString) {
				if (dateString != undefined) {
					const date = new Date(dateString);
					const year = date.getFullYear();
					const month = ("0" + (date.getMonth() + 1)).slice(-2); // getMonth返回的月份是从0开始的，所以需要加1
					const day = ("0" + date.getDate()).slice(-2);
					const hours = ("0" + date.getHours()).slice(-2);
					const minutes = ("0" + date.getMinutes()).slice(-2);

					return `${year}-${month}-${day} ${hours}:${minutes}`;
				}
				return null;
			},
		}
	}
</script>

<style>
	.demo-form-inline {
		text-align: left;
		/* 添加这一行使得表单项文本靠左对齐 */
	}

	.el-table th {
		color: #000;
		/* 你想要的颜色 */
	}

	.headers {
		width: auto;
		height: 150px;
		border: 1px solid #ddd;
		margin: 15px auto;
		border-radius: 3px 3px;
		position: relative;
	}
</style>